<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

<body>
	<ui:composition template="/template/template.xhtml">
		<ui:define name="body">										
			<h:form onkeypress="if (event.keyCode == 13) return false;">
								
				<rich:notifyMessages stayTime="2000" nonblocking="true" />
														              
				<a4j:commandLink id="createPane_btn" value="#{msg.create}"
					action="#{roomMaintainBean.newItem}"
					styleClass="buttonClass" style="font-size: 16px;"
					execute="@this" render="@none"
					oncomplete="#{rich:component('createPane')}.show();" 
					rendered="#{sec:ifAnyGranted('ROLE_ADMIN')}">
									
					
				</a4j:commandLink>		
				
				<h:outputText value="&#160;" />		
				<h:outputText value="&#160;" />		
				<h:outputText value="&#160;" />										
								
				<a4j:commandLink
					id="searchPane_btn" value="#{msg.search}"
					styleClass="buttonClass" style="font-size: 16px;"					
					execute="@this" render="@none"
					oncomplete="#{rich:component('searchPane')}.show();">
					
					<rich:componentControl event="click" operation="show" target="searchPane">
		                <a4j:param name="event" value="event" noEscape="true" />
		                <rich:hashParam>
		                    <a4j:param noEscape="true" name="top"
		                        value="jQuery(#{rich:element('searchPane_btn')}.parentNode).offset().top" />
		                    <a4j:param noEscape="true" name="left" value="jQuery(#{rich:element('searchPane_btn')}.parentNode).offset().left" />
		                </rich:hashParam>
		            </rich:componentControl>
					
				</a4j:commandLink>			
				
				<rich:extendedDataTable id="dataTable" width="100%" rows="15" frozenColumns="3"
					value="#{roomMaintainBean.rooms}" var="room" iterationStatusVar="it">
					
					<f:facet name="header">
		                <h:outputText value="#{msg.room_maintain}" />
		            </f:facet>
					
					<rich:column width="50px">
						<f:facet name="header">
			                <h:outputText value="#{msg.index_logo}" />
			            </f:facet>						 
						<h:outputText value="#{it.index + 1}" />						
					</rich:column>
					
					<rich:column width="200px"
						sortBy="#{room.floor.building.buildingName}"
						sortOrder="#{roomMaintainBean.sortsOrders['room_buildingname']}">
						
						<f:facet name="header">			                
			                <h:panelGrid columns="2">
								<a4j:commandLink style="color:#FFFFFF" styleClass="tableTitle"
									value="#{msg.building_name}" render="@form"
									action="#{roomMaintainBean.sort}" execute="@this" immediate="true" > 									
									<f:param name="sortProperty" value="room_buildingname" />							
								</a4j:commandLink>

								<h:graphicImage library="images" name="icons/down_icon.gif"
									rendered="#{roomMaintainBean.sortsOrders['room_buildingname']=='descending'}" />

								<h:graphicImage library="images"
									name="icons/up_icon.gif.gif"
									rendered="#{roomMaintainBean.sortsOrders['room_buildingname']=='ascending'}" />

							</h:panelGrid>
			            </f:facet>		
						<h:outputText value="#{room.floor.building.buildingName}" />
					</rich:column>			
					
					<rich:column width="200px"
						sortBy="#{room.floor.floorName}"
						sortOrder="#{roomMaintainBean.sortsOrders['room_floorname']}">
						
						<f:facet name="header">			                
			                <h:panelGrid columns="2">
								<a4j:commandLink style="color:#FFFFFF" styleClass="tableTitle"
									value="#{msg.floor_name}" render="@form"
									action="#{roomMaintainBean.sort}" execute="@this" immediate="true" > 									
									<f:param name="sortProperty" value="room_floorname" />							
								</a4j:commandLink>

								<h:graphicImage library="images" name="icons/down_icon.gif"
									rendered="#{roomMaintainBean.sortsOrders['room_floorname']=='descending'}" />

								<h:graphicImage library="images"
									name="icons/up_icon.gif.gif"
									rendered="#{roomMaintainBean.sortsOrders['room_floorname']=='ascending'}" />

							</h:panelGrid>
			            </f:facet>		
						<h:outputText value="#{room.floor.floorName}" />
					</rich:column>	
					
					<rich:column width="250px"
						sortBy="#{room.roomName}"
						sortOrder="#{roomMaintainBean.sortsOrders['room_roomname']}">
						
						<f:facet name="header">			                
			                <h:panelGrid columns="2">
								<a4j:commandLink style="color:#FFFFFF" styleClass="tableTitle"
									value="#{msg.room_name}" render="@form"
									action="#{roomMaintainBean.sort}" execute="@this" immediate="true" > 									
									<f:param name="sortProperty" value="room_roomname" />							
								</a4j:commandLink>

								<h:graphicImage library="images" name="icons/down_icon.gif"
									rendered="#{roomMaintainBean.sortsOrders['room_roomname']=='descending'}" />

								<h:graphicImage library="images"
									name="icons/up_icon.gif.gif"
									rendered="#{roomMaintainBean.sortsOrders['room_roomname']=='ascending'}" />

							</h:panelGrid>
			            </f:facet>		
						<h:outputText value="#{room.roomName}" />
					</rich:column>											
					
					<rich:column width="100px"
						sortBy="#{room.status}"
						sortOrder="#{roomMaintainBean.sortsOrders['room_status']}">
						<f:facet name="header">
							 <h:panelGrid columns="2">
								<a4j:commandLink style="color:#FFFFFF" styleClass="tableTitle"
									value="#{msg.status}" render="@form"
									action="#{roomMaintainBean.sort}" execute="@this" immediate="true" > 									
									<f:param name="sortProperty" value="room_status" />							
								</a4j:commandLink>

								<h:graphicImage library="images" name="icons/down_icon.gif"
									rendered="#{roomMaintainBean.sortsOrders['room_status']=='descending'}" />

								<h:graphicImage library="images"
									name="icons/up_icon.gif.gif"
									rendered="#{roomMaintainBean.sortsOrders['room_status']=='ascending'}" />
							</h:panelGrid>			                
			            </f:facet>	
						<h:outputText value="#{room.status}" />
					</rich:column>
					
					<rich:column width="100px"
						sortBy="#{room.roomType}"
						sortOrder="#{roomMaintainBean.sortsOrders['room_type']}">
						<f:facet name="header">
							 <h:panelGrid columns="2">
								<a4j:commandLink style="color:#FFFFFF" styleClass="tableTitle"
									value="#{msg.type}" render="@form"
									action="#{roomMaintainBean.sort}" execute="@this" immediate="true" > 									
									<f:param name="sortProperty" value="room_type" />							
								</a4j:commandLink>

								<h:graphicImage library="images" name="icons/down_icon.gif"
									rendered="#{roomMaintainBean.sortsOrders['room_type']=='descending'}" />

								<h:graphicImage library="images"
									name="icons/up_icon.gif.gif"
									rendered="#{roomMaintainBean.sortsOrders['room_type']=='ascending'}" />
							</h:panelGrid>			                
			            </f:facet>	
						<h:outputText value="#{room.roomType}" />
					</rich:column>
										 
					<rich:column width="300px"
						sortBy="#{room.description}"
						sortOrder="#{roomMaintainBean.sortsOrders['room_description']}">
						<f:facet name="header">
							<h:panelGrid columns="2">
								<a4j:commandLink style="color:#FFFFFF" styleClass="tableTitle"
									value="#{msg.description}" render="@form"
									action="#{roomMaintainBean.sort}" execute="@this" immediate="true" > 									
									<f:param name="sortProperty" value="room_description" />							
								</a4j:commandLink>

								<h:graphicImage library="images" name="icons/down_icon.gif"
									rendered="#{roomMaintainBean.sortsOrders['room_description']=='descending'}" />

								<h:graphicImage library="images"
									name="icons/up_icon.gif.gif"
									rendered="#{roomMaintainBean.sortsOrders['room_description']=='ascending'}" />
							</h:panelGrid>			                
			            </f:facet>			           
						<h:outputText value="#{room.description}" />
					</rich:column>		
								
					
					 <rich:column width="50px">
					 	<f:facet name="header">
			                <h:outputText value="#{msg.edit}" />
			            </f:facet>	
		                <a4j:commandLink style="border:none;" execute="@this" render="@none"
							oncomplete="#{rich:component('deletePane')}.show()"
							rendered="#{sec:ifAnyGranted('ROLE_ADMIN')}">		                    
		                    <h:graphicImage library="images" name="icons/delete.gif" alt="delete" />
		                    <a4j:param value="#{it.index}" assignTo="#{roomMaintainBean.currentIndex}" />
		                </a4j:commandLink>
		                
		                <a4j:commandLink style="border:none;" render="editPane" execute="@this"
		                	action="#{roomMaintainBean.selectItem}"
		                    oncomplete="#{rich:component('editPane')}.show()">		                    
		                    <h:graphicImage library="images" name="icons/edit.gif" alt="edit" />
		                    <a4j:param value="#{it.index}" assignTo="#{roomMaintainBean.currentIndex}" />
		                   	   	                    		                  		                    		                  
		                </a4j:commandLink>
		                
		            </rich:column>
		            
		            <f:facet name="footer">
		                <rich:dataScroller page="#{roomMaintainBean.page}" />
		            </f:facet>
					
				</rich:extendedDataTable>
				
				<a4j:jsFunction name="search" action="#{roomMaintainBean.search}" 
					render="dataTable" execute="@this" />
				
				<a4j:jsFunction name="remove" action="#{roomMaintainBean.remove}" 
					render="dataTable" execute="@this"
            		oncomplete="#{rich:component('deletePane')}.hide();" />
						
				<rich:popupPanel id="statPane" autosized="true">		
            		<h:graphicImage library="images" name="icons/ai.gif" alt="ai" />
            		<h:outputText value="#{msg.please_wait}" />
        		</rich:popupPanel>
        		
				<rich:popupPanel id="deletePane" autosized="true">
					<f:facet name="header">
            			<h:outputText value="#{msg.delete}" />
        			</f:facet>
					<h:outputText value="#{msg.delete_confirm_message}" styleClass="inputText" style="font-size: 16px;" />		            
		            <a4j:commandButton styleClass="buttonClass" style="font-size: 16px;" 
		            	value="#{msg.cancel}" onclick="#{rich:component('deletePane')}.hide(); return false;" />
		            <a4j:commandButton styleClass="buttonClass" style="font-size: 16px;"
		            	value="#{msg.delete}" onclick="remove(); return false;" />
		        </rich:popupPanel>		
		        
				<rich:popupPanel header="#{msg.edit}" id="editPane"  width="450" height="400" 
		        	autosized="true" domElementAttachment="parent">
		        	<f:facet name="controls">
			            <h:outputLink value="#" onclick="#{rich:component('editPane')}.hide(); return false;" styleClass="inputText">			                
			                X
			            </h:outputLink>
			        </f:facet>
					<table>
						<tr>
							<td><h:outputText value="#{msg.room_id}" styleClass="inputText" style="font-size: 16px;" /></td>
							<td><h:outputText value="#{roomMaintainBean.editedItem.roomId}" styleClass="inputText" style="font-size: 16px;" /></td>    
							<td></td>
						</tr>	
						
						<tr>
							<td><h:outputText value="#{msg.building_name}" styleClass="inputText" style="font-size: 16px;" /></td>
							<td>
								<h:selectOneMenu id="edit_building_name" styleClass="selectClass"
									required="true" requiredMessage="#{msg.building_name}-#{msg.required_field}"
									value="#{roomMaintainBean.selectedBuildingId}" 
									valueChangeListener="#{roomMaintainBean.buildingValueChanged}">
									
									<f:selectItems value="#{roomMaintainBean.buildingOptions}" />
									<a4j:ajax event="valueChange" render="edit_floor_name" execute="@this" />
									
								</h:selectOneMenu> 									
							</td>    
							<td><rich:message for="edit_building_name" styleClass="message-icon"/></td>
						</tr>	
						
						<tr>
							<td><h:outputText value="#{msg.floor_name}" styleClass="inputText" style="font-size: 16px;" /></td>
							<td>
								<h:selectOneMenu id="edit_floor_name" styleClass="selectClass"
									value="#{roomMaintainBean.selectedFloorId}" 
									required="true" requiredMessage="#{msg.floor_name}-#{msg.required_field}" >
									<f:selectItems value="#{roomMaintainBean.floorOptions}" />
								</h:selectOneMenu> 	
							</td>    
							<td><rich:message for="edit_floor_name" styleClass="message-icon"/></td>
						</tr>		
					
						<tr>
							<td><h:outputText value="#{msg.room_name}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td><h:inputText value="#{roomMaintainBean.editedItem.roomName}" required="true" 
		                			requiredMessage="#{msg.required_field}" id="edit_room_name" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    
							<td><rich:message for="edit_room_name" styleClass="inputText"/></td>
						</tr>											
		                
		                <tr>		                				                		              
		                	<td><h:outputText value="#{msg.status}" styleClass="outputText" style="font-size: 16px;" /></td>
		                	<td>
		                		<h:selectOneMenu id="edit_room_status" styleClass="selectClass"
		                			required="true" requiredMessage="#{msg.status}-#{msg.required_field}"
									value="#{roomMaintainBean.editedItem.status}" >	
									<f:selectItems value="#{roomMaintainBean.statusOptions}" />														
								</h:selectOneMenu>											                	
		                	</td>    
		                	<td><rich:message for="edit_room_status" styleClass="message-icon" /></td>		                	
		                </tr>
		                
		                <tr>		                				                		              
		                	<td><h:outputText value="#{msg.type}" styleClass="inputText" style="font-size: 16px;" /></td>
		                	<td>
		                		<h:selectOneMenu id="edit_room_type" styleClass="selectClass"
		                			required="true" requiredMessage="#{msg.type}-#{msg.required_field}"
									value="#{roomMaintainBean.editedItem.roomType}" >	
									<f:selectItems value="#{roomMaintainBean.typeOptions}" />														
								</h:selectOneMenu>	
							</td>		                			               
		                	<td><rich:message for="edit_room_type" styleClass="message-icon" /></td>		                			                	
		                </tr>
		                
		                <tr>		                				                		              
		                	<td><h:outputText value="#{msg.description}" styleClass="inputText" style="font-size: 16px;" /></td>
		                	<td><h:inputText value="#{roomMaintainBean.editedItem.description}" required="true" 
		                			requiredMessage="#{msg.description}-#{msg.required_field}" id="edit_room_description" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    
		                	<td><rich:message for="edit_room_description" styleClass="message-icon" /></td>
		                </tr>
		                											
						<tr>
							<td colspan="2" align="right">
								<a4j:commandButton styleClass="buttonClass" style="font-size: 16px;" 
									value="#{msg.save}" action="#{roomMaintainBean.update}" render="dataTable" execute="editPane"
		                			oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editPane')}.hide();}" />
		            			<a4j:commandButton styleClass="buttonClass" style="font-size: 16px;" 
		            				value="#{msg.cancel}" onclick="#{rich:component('editPane')}.hide(); return false;" />
							</td>						
						</tr>
					</table>
				</rich:popupPanel>
		        
		        <rich:popupPanel header="#{msg.create}" id="createPane"  width="450" height="320" 
		        	autosized="true" domElementAttachment="parent">
		        	<f:facet name="controls">
			            <h:outputLink value="#" onclick="#{rich:component('createPane')}.hide(); return false;" styleClass="inputText">			                
			                X
			            </h:outputLink>
			        </f:facet>
					<table>
						<tr>
							<td><h:outputText value="#{msg.building_name}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td>
								<h:selectOneMenu id="create_building_name" styleClass="selectClass"
									required="true" requiredMessage="#{msg.building_name}-#{msg.required_field}"
									value="#{roomMaintainBean.selectedBuildingId}" 
									valueChangeListener="#{roomMaintainBean.buildingValueChanged}">
									
									<f:selectItems value="#{roomMaintainBean.buildingOptions}" />
									<a4j:ajax event="valueChange" render="create_floor_name" execute="@this" />
									
								</h:selectOneMenu> 	
							</td>    
							<td><rich:message for="create_building_name" styleClass="message-icon"/></td>
						</tr>	
						
						<tr>
							<td><h:outputText value="#{msg.floor_name}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td>
								<h:selectOneMenu id="create_floor_name" styleClass="selectClass"
									value="#{roomMaintainBean.selectedFloorId}" 
									required="true" requiredMessage="#{msg.floor_name}-#{msg.required_field}" >
									<f:selectItems value="#{roomMaintainBean.floorOptions}" />
								</h:selectOneMenu> 	
							</td>    
							<td><rich:message for="create_floor_name" styleClass="message-icon"/></td>
						</tr>	
					
						<tr>
							<td><h:outputText value="#{msg.room_name}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td><h:inputText value="#{roomMaintainBean.editedItem.roomName}" required="true" 
		                			requiredMessage="#{msg.room_name}-#{msg.required_field}" id="create_room_name" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    
							<td><rich:message for="create_room_name" styleClass="message-icon"/></td>
						</tr>											
		                
		                <tr>		                				                		              
		                	<td><h:outputText value="#{msg.status}" styleClass="outputText" style="font-size: 16px;" /></td>
		                	<td>
		                		<h:selectOneMenu id="create_room_status" styleClass="selectClass"
		                			required="true" requiredMessage="#{msg.status}-#{msg.required_field}"
									value="#{roomMaintainBean.editedItem.status}" >	
									<f:selectItems value="#{roomMaintainBean.statusOptions}" />														
								</h:selectOneMenu>											                	
		                	</td>    
		                	<td><rich:message for="create_room_status" styleClass="message-icon" /></td>
		                </tr>
		                
		                <tr>		                				                		              
		                	<td><h:outputText value="#{msg.type}" styleClass="outputText" style="font-size: 16px;"/></td>
		                	<td>
		                		<h:selectOneMenu id="create_room_type" styleClass="selectClass"
		                			required="true" requiredMessage="#{msg.type}-#{msg.required_field}"
									value="#{roomMaintainBean.editedItem.roomType}" >	
									<f:selectItems value="#{roomMaintainBean.typeOptions}" />														
								</h:selectOneMenu>	
							</td>		                			               
		                	<td><rich:message for="create_room_type" styleClass="message-icon" /></td>
		                </tr>
		                
		                <tr>		                				                		              
		                	<td><h:outputText value="#{msg.description}" styleClass="outputText" style="font-size: 16px;"/></td>
		                	<td><h:inputText value="#{roomMaintainBean.editedItem.description}" required="true" 
		                			requiredMessage="#{msg.description}-#{msg.required_field}" id="create_room_description" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>    
		                	<td><rich:message for="create_room_description" styleClass="message-icon" /></td>
		                </tr>
		                											
						<tr>
							<td colspan="2" align="right">
								<a4j:commandButton styleClass="buttonClass" style="font-size: 16px;"
									value="#{msg.create}" action="#{roomMaintainBean.create}" render="dataTable" execute="createPane"
		                			oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('createPane')}.hide();}" />
		            			<a4j:commandButton styleClass="buttonClass" style="font-size: 16px;"
		            				value="#{msg.cancel}" onclick="#{rich:component('createPane')}.hide(); return false;" />
							</td>	
							<td></td>					
						</tr>
					</table>

		        </rich:popupPanel>
		        
		        <rich:popupPanel header="#{msg.search}" id="searchPane"  width="400" height="250" 
		        	autosized="true" domElementAttachment="parent">
		        	<f:facet name="controls">
			            <h:outputLink value="#" onclick="#{rich:component('searchPane')}.hide(); return false;" styleClass="inputText">			                
			                X
			            </h:outputLink>
			        </f:facet>
					<table>
						<tr>
							<td><h:outputText value="#{msg.building_name}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td>
								<h:selectOneMenu id="search_building_name" styleClass="selectClass"									
									value="#{roomMaintainBean.selectedBuildingId}" 
									valueChangeListener="#{roomMaintainBean.buildingValueChanged}">
									
									<f:selectItems value="#{roomMaintainBean.buildingOptions}" />
									<a4j:ajax event="valueChange" render="search_floor_name" execute="@this" />
									
								</h:selectOneMenu> 	
																
							</td>   
		                </tr> 
		                <tr>
							<td><h:outputText value="#{msg.floor_name}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td>
								<h:selectOneMenu id="search_floor_name" styleClass="selectClass"
									value="#{roomMaintainBean.selectedFloorId}" > 									
									<f:selectItems value="#{roomMaintainBean.floorOptions}" />
								</h:selectOneMenu> 								
							</td>   
		                </tr> 
						<tr>
							<td><h:outputText value="#{msg.keyword}" styleClass="outputText" style="font-size: 16px;" /></td>
							<td><h:inputText value="#{roomMaintainBean.searchStr}" 
		                			styleClass="inputText" style="font-size: 16px;" maxlength="30" size="30" /></td>   
		                </tr> 
		                <tr>											
							<td colspan="2" align="right">
								<a4j:commandButton styleClass="buttonClass" style="font-size: 16px;"
									value="#{msg.search}" action="#{roomMaintainBean.search}" render="dataTable" execute="searchPane"
		                			oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('searchPane')}.hide();}" />
		            			<a4j:commandButton styleClass="buttonClass" style="font-size: 16px;"
		            				value="#{msg.cancel}" onclick="#{rich:component('searchPane')}.hide(); return false;" />
							</td>													
						</tr>
					</table>

		        </rich:popupPanel>
			
			</h:form>						
			    
		</ui:define>
	</ui:composition>
</body>
</html>
